題目

CSS Challenge Day12

上面的圖是題目，而我們要做出幾乎一樣的樣子，題目中還有附上出題官方的CodePen，也有附上給我們解題用的template，當我們真的不會的時候，還是可以參考他們的寫法，所以沒有想像中困難。

我做好的此題CSS Challeage解答

那麼我們就開始吧。

題目分析

這個題目要求我們製作一段類似線上字典的畫面。

1. 文字排版跟浮水印：
   • 一段文字排版區塊
   • 左上角有壓一個淡淡的Quote圖示的浮水印
   • 反白文字：文字中間有一段是視覺上「反白」的文字
2. Tooltip視窗：滑鼠指上時會有動畫跳出該文字的讀音、意思⋯等的tooltip
   • 視窗樣式
   • 視窗彈出動畫
   • 滑鼠互動效果：滑鼠指上「播放」的喇叭圖示時，喇叭Icon會有縮放的變化。

開始解題

文字排版跟浮水印

<div class="frame">
  <div class="center">
		<p>I know quite certainly that I myself have no special talent; curiosity, obsession and dogged endurance, combined with self-criticism have brought me to my ideas.</p>
		<p class="author">Albert Einstein</p>
  </div>
</div>

一開始我先使用預設的 template，在 .frame 內先使用第一天教過的小工具來吸取顏色做成底色，也把文字顏色改成白色，並將所有文字直接複製貼上。

一開始的畫面會長這樣：

文字樣式

畫面有了之後，就可以開始修改文字的樣式，位置等等

.center {
	position: relative;
	margin-top: 90px;
	padding: 0 30px;
    
	p {
		font-size: 24px;
		line-height: 35px;
		
		&.author {
			font-weight: 300;
			font-style: italic;
			font-size: 20px;
			line-height: 28px;
		}
	}
}

這邊我個人習慣開兩個左右視窗，將題目與我要做的畫面放在左右進行比對，這樣比較好依照畫面調整。這邊如果你要 import 不同的 font-wight 或 font-style ，要記得去CSS最上面的那個 import font 的地方調整唷。

那這邊做好的畫面大概長這樣：

左上角 Quote 浮水印區塊

基本樣式做好之後，我們就可以來用 :before 這個偽類做左上角的浮水印。

.center {
	position: relative;
	margin-top: 90px;
	padding: 0 30px;
	
	&:before {
		content: '„';
		position: absolute;
		z-index: 0;
		display: block;
		font-size: 250px;
	}
    ...
}

要做偽類的第一個直覺反應就是要加上 content: '' ，否則你怎麼設定都不會有東西，但這邊我們的 content 內容不是空值，而是一個 „，這樣畫面上就剛好會呈現我們要的 Quote 圖樣，剛做好的時候長這樣：

確定可以呈現這個偽類之後，我們就來調整他的樣式。

&:before {
	content: '„';
	position: absolute;
	z-index: 0;
	display: block;
	font-size: 250px;
	font-family: Arial;
	top: -100px;
	left: 7px;
	opacity: 0.2;
	line-height: 35px;
}

這邊我修改了字型，雖然寫CSS也需要有辨識字型的技能，但如果你真的不知道，就直接查題目的也沒關係，反正重點是知道怎麼用。

另外，由於它是一個字型超大的 Quote 字樣，所以這邊一定要記得調整 line-height ，不然你會得到一個爆炸高的行高。

字體顏色部分我就做透明度而已，抓一個看起來類似的，因為後續的動態等等都不會有影響，他就是個靜態字在那裡，所以我就先這樣做了。
做好之後長這樣：

反白區塊

文字都做好之後，我們就可以來做中間 obsession 的反白的區塊了。

<p>I know quite certainly that I myself have no special talent; curiosity, <span class="selected">obsession</span> and dogged endurance, combined with self-criticism have brought me to my ideas.</p>

這邊可以看到我把這個區塊用一個 span 包起來，並且給了他一個 class name，因為我知道這邊我們等等還要做 tooltip，很有可能還會用到 span ，所以這邊就直接給他命名。

.selected {
	display: inline-block;
	background-color: #286F8A;
	padding: 0 8px 5px;
	margin: -10px 0;
	cursor: pointer;
	position: relative;
}

這邊我們給他 display: inline-block 是因為他還要順著整段文字走，不能把他設定成 block，但 inline-block 又可以有 block 的區塊概念，能讓我們設定 padding margin 那些，所以這邊使用它。

底色當然也是使用第一天教的小工具去吸色的，真的有夠方便。

這邊調整 padding 的重點是在視覺上看起來，字的四周色塊是一致的，不會有哪邊特別多或少，調整完 padding 之後，由於會有點影響到下一行的行高，所以我加上了 margin 去做一點視覺上的修正。

由於篇幅太長了，我決定分篇寫，下一篇再來寫後面的 Tooltip 視窗。

Wrap up and go home

希望改變了這種按照步驟的寫法，能讓更多人看得懂，也能跟我一樣喜歡上寫CSS。

那今天就先到這裡，明天我們再繼續來玩下一題。